<template>
	<div class="alarms-center-view">
		<div class="header-area" style="justify-content: space-between">
			<div style="display: flex">
				<p class="font-20-bold bread-crumb-title">报警中心</p>
				<div class="page-switch">
					<template :key="index" v-for="(item, index) in alarmsList">
						<a-button
							v-if="g6Permission.showBtn(item.key)"
							type="text"
							class="switch-item"
							:class="[activeTimeIndex === item.key && 'active']"
							@click="activeTimeIndex = item.key"
						>
							<span>{{ item.label }}</span>
						</a-button>
					</template>
				</div>
			</div>

			<div v-if="g6Permission.showBtn('alarmreview') && activeTimeIndex === 'alarmreview'" class="review">
				<a-tooltip placement="top" title="开启该功能后，AI产生的报警需要人工复核确认，才会展示在报警中心。">
					<global-svg-icon icon-name="information-line" style="margin-right: 8px"></global-svg-icon>
				</a-tooltip>
				<div class="title">报警复核</div>

				<a-switch v-model:checked="alarmSwitch.status" size="small" style="margin-right: 10px" @change="changeAlarmSwitch"></a-switch>

				<a-select v-model:value="alarmSwitch.model" style="width: 190px" @change="changeAlarmSwitch">
					<a-select-option :value="1">全部报警均需要复核</a-select-option>
					<a-select-option :value="2">无人员信息需要复核</a-select-option>
				</a-select>
			</div>
		</div>
		<div v-if="g6Permission.showBtn('hardware')">
			<alarm-hardware v-if="activeTimeIndex === 'hardware'"></alarm-hardware>
		</div>
		<div v-if="g6Permission.showBtn('algorithm')" class="alarm-main">
			<div style="height: 100%">
				<alarm-algorithm v-if="activeTimeIndex === 'algorithm'"></alarm-algorithm>
			</div>
		</div>
		<div v-if="g6Permission.showBtn('alarmreview')">
			<alarm-review v-if="activeTimeIndex === 'alarmreview'" :alarmreview-switch="alarmSwitch.status"></alarm-review>
		</div>
	</div>
</template>

<script setup lang="ts">
import { g6StorageValue, g6Permission } from 'glasssix-utils-ts';
import { AlarmAlgorithm, AlarmHardware, AlarmReview } from '../../components/index';
import { AlarmCenterAPI } from '../../api';
import { message } from 'ant-design-vue';
defineOptions({ name: 'AlarmsCenterView' });

const alarmsList = ref<Record<string, string>[]>([
	{ key: 'algorithm', label: '算法报警' },
	{ key: 'hardware', label: '硬件报警' },
	{ key: 'alarmreview', label: '报警复核' }
]);
// 开关操作
const alarmSwitch = reactive({
	switchTag: 'AI_ALARM_AUDIT',
	model: 1,
	status: false
});
const getAlarmreviewSwitch = async () => {
	const res: TsRes = await AlarmCenterAPI.switchConfig('AI_ALARM_AUDIT');
	if (res.code === 0) {
		alarmSwitch.model = res.data.model;
		alarmSwitch.status = res.data.status;
	}
};
const changeAlarmSwitch = async () => {
	const res: TsRes = await AlarmCenterAPI.updateSwitchConfigStatus(JSON.parse(JSON.stringify(alarmSwitch)));
	console.log('changeAlarmSwitch', res);
	if (res.code === 0) {
		message.success('设置成功');
	}
};

const activeTimeIndex = ref<string>('');
onMounted(() => {
	getAlarmreviewSwitch();
	const flatMenus = Array.isArray(g6StorageValue.get('session', 'flatMenus'))
		? (g6StorageValue.get('session', 'flatMenus') as TsGlobalType.TsRoleMenu[])
		: [];

	// 当前菜单页面
	const curMenu = flatMenus.find((item: TsGlobalType.TsRoleMenu) => item.code === 'alarms-center') as TsGlobalType.TsRoleMenu;
	if (curMenu.pageBtnList.length >= 2) {
		activeTimeIndex.value = curMenu?.pageBtnList[1].code;
	}
});
</script>

<style lang="less">
.alarms-center-view {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	// width: 100vw;
	height: calc(100vh - 125px) !important;
	margin: 25px 24px;
	margin-bottom: 0;
	border: 1px solid @borderColor01;
	border-radius: 8px;
	padding: 20px 32px 0;
	padding-right: 0;
	background: rgba(8, 22, 59, 0.4);

	.alarm-main {
		flex: 1;
		overflow: hidden;
	}

	.header-area {
		display: flex;
		height: 30px;

		.review {
			display: flex;
			align-items: center;
			margin-right: 32px;
			color: @text02;

			.title {
				margin-right: 10px;
			}
		}

		.bread-crumb-title {
			color: rgba(240, 246, 252, 0.95);
		}

		.page-switch {
			display: flex;
			margin-left: 32px;

			.switch-item {
				width: 80px;
				height: 30px;
				margin-right: 10px;
				border-radius: 6px;
				padding: 4px 12px;
				font-size: 14px;
				font-weight: 700;
				line-height: 30px;
				text-align: center;
				color: @text01;
				cursor: pointer;

				&.active {
					background: @mask02;
				}
			}
		}
	}

	.ant-switch-small {
		min-width: 26px;
		height: 14px;
		line-height: 14px;
		background-color: @text03;

		&:hover {
			background-color: @text03 !important;
		}
	}

	.ant-switch-handle {
		position: absolute;
		top: 1px;
		left: 1px;
		width: 12px;
		height: 12px;
		transition: all 0.2s ease-in-out;
	}

	.ant-switch-small.ant-switch-checked .ant-switch-handle {
		left: calc(100% - 12px) !important;
	}

	.ant-switch-checked {
		background-color: @secondary01;

		&:hover {
			background-color: @secondary01 !important;
		}
	}
}
</style>
